<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:p="http://primefaces.org/ui" >
    <h:head>
        <title>Cadastrar Cabelo</title>
    </h:head>
    <h:body>
        <p:layout fullPage="true">

            <p:layoutUnit position="north" size="100">
                <center><h1>Cadastro de Cabelos</h1></center>
            </p:layoutUnit>

            <p:layoutUnit position="west" size="200" rendered="true" closable="true" resizable="true" header="Menu">
                <h:form>
                    <p:commandLink value="Novo Contato" />
                </h:form>
            </p:layoutUnit>

            <p:layoutUnit position="center">
                <h:form>
                    <h:panelGrid columns="2">
                        <h:outputText value="Tipo de Cabelo" />
                        <p:inputText id="cabeloTxt" maxlength="45" value="#{cabeloBean.cabelo.tipo}"/>
                        <h:outputText value="Cor do Cabelo" />
                        <p:inputText id="corCabeloTxt" maxlength="45" value="#{cabeloBean.cabelo.cor}" />
                        <p:commandButton value="Cadastrar Cabelo"  actionListener="#{cabeloBean.adicionarCabelo}" update="tabelaCabelos"/>
                        <p:commandButton value="Limpar Campos" type="reset" />
                    </h:panelGrid>

                    <p:dataTable value="${cabeloBean.listarCabelos()}" var="cabelo" border="1" id="tabelaCabelos">
                        <p:column>
                            <f:facet name="header">
                                ID
                            </f:facet>
                            <h:outputText value="#{cabelo.id}"/>
                        </p:column>
                        <p:column>
                            <f:facet name="header">
                                TIPO
                            </f:facet>
                            <h:outputText value="#{cabelo.tipo}"/>
                        </p:column>
                        <p:column>
                            <f:facet name="header">
                                COR
                            </f:facet>
                            <center><h:outputText value="#{cabelo.cor}" /></center>
                        </p:column>
                        <p:column>
                            <f:facet name="header">
                                AÇÕES 
                            </f:facet>
                            <center><h:commandButton value="Excluir" action="#{cabeloBean.removerCabelo(cabelo)}" onclick="if(!confirm('Deseja excluir o cabelo #{cabelo.tipo}')) return true;" />
                                | <h:commandButton value="Atualizar" action="#{cabeloBean.carregarCabelo(cabelo)}" /></center>
                        </p:column>
                    </p:dataTable>
                </h:form>
            </p:layoutUnit>

        </p:layout>
    </h:body>
</html>